import Taro, { useLoad } from '@tarojs/taro'
import { View, Form, Button, Input, Text } from '@tarojs/components'
import { updatePassword } from '@/api'
import { useRequest, } from 'ahooks'

import './index.module.scss'

export default function LoginPage() {

  useLoad(() => {
    // Taro.hideHomeButton()
  })

  const { loading, run } = useRequest(updatePassword, {
    manual: true,
    onSuccess: () => {
      Taro.clearStorage()
      Taro.reLaunch({
        url: "/pages/login/index"
      })
    }
  })
  const updataPassword = async (res) => {
    const form = res?.detail?.value || {}
    console.log(form, res)
    if (!form?.old_pwd) return Taro.showToast({ title: '请输入旧密码', icon: 'none' })
    if (!form?.new_pwd) return Taro.showToast({ title: '请输入新密码', icon: 'none' })
    if (!form?.new_pwd_two) return Taro.showToast({ title: '请再次输入新密码', icon: 'none' })
    if (form?.new_pwd !== form?.new_pwd_two) return Taro.showToast({ title: '两次输入的密码不一致', icon: 'none' })
    run(form)
  }
  return (
    <View className='login-box'>
      <View className='text-lg padding'>修改设备密码</View>
      <Form onSubmit={updataPassword}>
        <View className='padding-bottom margin-bottom'>
          <View className='cu-form-group'>
            <Text className='title'>旧密码</Text>
            <Input name='old_pwd' password placeholder='请输入旧密码' />
          </View>
          <View className='cu-form-group'>
            <Text className='title'>新密码</Text>
            <Input name='new_pwd' password placeholder='请输入新密码' />
          </View>
          <View className='cu-form-group'>
            <Text className='title'>确认密码</Text>
            <Input name='new_pwd_two' password placeholder='请再次输入新密码' />
          </View>
        </View>
        <Button loading={loading} disabled={loading} style={{ width: '92%'}} className='update-pass-btn text-lg text-center margin-bottom margin main-bc padding-tb-xs round line-white' formType='submit'>
          修改密码
        </Button>
      </Form >
    </View >
  )
}
